<template>
                        <el-popover
                          v-if="content&& (content.length> lenHover)"
                          placement="top-start"
                          trigger="hover"
                          :visible-arrow="false"
                          :content="content">
                          <div slot="reference" class="colorGray">
                                          {{ content }}
                                      </div>
                        </el-popover>
                        <div v-else class="colorGray" >
                                          {{ content }}
                                      </div>
  </template>
  
  <script>

  export default {
    name: 'popCom',
    props: {
      content: {
        type: String,
        default: '',
      },
      lenHover: {
        type: Number,
        default: 9,
      },

    },
    data() {
      return {
      }
    },

  }
  </script>
  
  <style lang="scss" scoped>
    .colorGray {
      display: block;
      color: #909399;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 180px;


    }
    ::v-deep .el-popover__title{
        margin-bottom: 0;
    }
  </style>